import React, { Component } from "react";
import "./login.scss";
class App extends Component {

  state = {
    mobile:'',  //手机号
    msg_code:'', //验证码
    checked:false, //单选
    error_msg:'', //输入不正确的错误信息
  }
  // 手机号
  // handleMobileChange = (e) => {
  //   console.log(e);
  //   console.log(e.target.value);
  //   let str = this.state.mobile
  //   this.setState({
  //     // mobile:e.target.value 类型一
  //     [str]:e.target.value  类型二
  //   })
  // }
  // 验证码
  // handleMsgCodeChange = (e) => {
  //   console.log(e.target.value);
  //   let str = this.state.error_msg
  //   this.setState({
  //     // msg_code:e.target.value  类型一
  //     [str]:e.target.value  类型二
  //   }) 
  // }
  // 单选
  // handleChecked = (e) => {
  //   console.log(e.target.checked)
  //   let str = this.state.checked
  //   this.setState({
  //     // checked:e.target.checked   类型一
  //     [str]:e.target.checked  类型二
  //   })
  // }
  // 抽取上面三个事件处理函数 变成一个 处理函数
  handleChange = (e) => {
    console.log(e);
    console.log(e.target.dataset);
    let { type, key } = e.target.dataset;
    let value = ''
    if(type === 'checkbox'){
      value = e.target.checked
    }else{
      value = e.target.value
    }

    this.setState({
      [key]:value
    })
  }

  // 验证手机号的函数
  validateMobile = (mobile) => {
    if(!mobile){
      this.setState({
        error_msg:'手机号不能为空'
      })
      return false
    }

    if (!/^1[0-9]{10}$/.test(mobile)) {
      this.setState({
        error_msg:'手机号码格式错误'
      })
      return false
    }
  }

  // 登录按钮
  handleLogin = () => {
    let mobile = this.state.mobile

    // 手机号验证
    let valid  = this.validateMobile(mobile)
    // 如果验证手机号失败，validateMobile返回false
    if(!valid){  
      return false
    }
  }
  render() {
    return (
      <div className="app">
        <div className="wy-wapr">
          <div className="phone">
            {/* <input type="number" placeholder="请输入手机号" onChange={this.handleMobileChange}/> */}
            <input type="number" placeholder="请输入手机号" data-type="text" data-key="mobile"  value={this.state.mobile} onChange={this.handleChange}/>
          </div>
          <div className="msg_code">
            {/* <input type="number" placeholder="请输入短信验证码" onChange={this.handleMsgCodeChange}/> */}
            <input type="number" placeholder="请输入短信验证码" data-type="number" data-key="msg_code"  value={this.state.msg_code} onChange={this.handleChange}/>
            <div className="msg_code_btn">
              <span>获取验证码</span>
            </div>
          </div>
          {/* 输入错误时的提示信息 */}
          <div>
            {this.state.error_msg?(<span className='error'>{this.state.error_msg}</span>):''}
          </div>
          <div className="box1">
            <span>遇到问题</span>
            <b>使用密码验证登录</b>
          </div>
          <div className="btn" onClick={this.handleLogin}>登录</div>
          <div className="bottom">
            {/* <input type="checkbox" onChange={this.handleChecked}/> */}
            <input type="checkbox" value={this.state.checked} data-type="checkbox" data-key="checked" onChange={this.handleChange}/>
            <span>我同意网易条款</span>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
